<template>
    <div class="cultivated-zoom-container yuan-container">
        <PageTopVue :detailInfo="formData" v-if="formData.id" @tplChange="tplChange" />
        <div class="page-main">
            <div class="page-type">
                <div class="yuan-btn" :class="pageType==='basic'?'primary-btn':'info-btn'" @click="pageType='basic'">药材基本信息</div>
                <div class="yuan-btn" :class="pageType==='basic'?'info-btn':'primary-btn'" @click="pageType='senior'">其他高级信息</div>
            </div>
            <div class="yuan-form info-form" v-show="pageType==='basic'">
                <div class="form-item">
                    <span class="form-label must-label">基地位置：</span>
                    <span type="text" class="form-select iconfont" @click="showAreaPicker=true"
                        v-if="formData.baseLocationCopy">{{formData.baseLocationCopy}}</span>
                    <span type="text" class="form-select iconfont form-placeholder" @click="showAreaPicker=true"
                        v-else>请选择省市区</span>

                    <van-popup v-model="showAreaPicker" position="bottom">
                        <van-area :area-list="areaList" @confirm="selectArea" @cancel="showAreaPicker = false" />
                    </van-popup>

                </div>
                <div class="form-item">
                    <span class="form-label must-label">详细地址：</span>
                    <input type="text" class="form-input" v-model="formData.baseLocation" placeholder="请输入详细地址">
                </div>
                <div id="myMap"></div>
                <div class="form-item">
                    <span class="form-label">养殖年限：</span>
                    <input type="number" class="form-input" v-model="formData.plantAgeLimit" placeholder="请输入年限">
                    <span class="form-unit">年</span>
                </div>
                <div class="form-item">
                    <span class="form-label">采收月份：</span>
                    <span class="p-t-t-info form-select iconfont" @click="showMonthPicker=true"
                        v-if="formData.recoveryTime">{{formData.recoveryTime}}</span>
                    <span class="p-t-t-info form-select form-placeholder iconfont" @click="showMonthPicker=true"
                        v-else>请选择采收月份</span>
                    <span class="form-unit">月</span>
                    <van-popup v-model="showMonthPicker" position="bottom">
                        <van-picker show-toolbar :columns="monthColumns" @cancel="showMonthPicker = false"
                            @confirm="onMonthConfirm" />
                    </van-popup>
                </div>
                <div class="form-item form-item-row">
                    <span class="form-label">初加工流程：</span>
                    <textarea class="form-textarea" :rows="5" v-model="formData.processFlow" placeholder="请输入初加工流程" />
                </div>
                <div class="form-item form-item-row">
                    <span class="form-label">种植图片：</span>
                    <UploadVue @change="plantChange" :defImgList="[formData.plantPicture ]" :limit="1" v-if="pageReady" />
                </div>
                <div class="form-item form-item-row">
                    <span class="form-label">采收图片：</span>
                    <UploadVue @change="recoveryChange" :defImgList="[formData.recoveryPicture]" :limit="1" v-if="pageReady" />
                </div>
                <div class="form-item form-item-row">
                    <span class="form-label">初加工图片：</span>
                    <UploadVue @change="processChange" :defImgList="[formData.processPicture]" :limit="1" v-if="pageReady" />
                </div>

                <div class="yuan-btn primary-btn submit-btn" @click="saveBasic">下一步</div>
            </div>
            <div class="yuan-form info-form" v-show="pageType==='senior'">

                <div class="form-item">
                    <span class="form-label">海拔：</span>
                    <input type="number" class="form-input" v-model="formData.baseAltitude" placeholder="请输入海拔">
                    <span class="form-unit">m</span>
                </div>
                <div class="form-item">
                    <span class="form-label">年平均气温：</span>
                    <input type="number" class="form-input" v-model="formData.averageLapseRate" placeholder="请输入平均气温">
                    <span class="form-unit">℃</span>
                </div>
                <div class="form-item">
                    <span class="form-label">是否需要单独育苗：</span>
                    <span type="text" class="form-select iconfont" @click="showNurseryPicker=true"
                        v-if="formData.whetherNeedNursery">{{formData.whetherNeedNursery}}</span>
                    <span type="text" class="form-select iconfont form-placeholder" @click="showNurseryPicker=true"
                        v-else>请选择育苗方式</span>

                    <van-popup v-model="showNurseryPicker" position="bottom">
                        <van-picker show-toolbar :columns="['是','否']" @cancel="showNurseryPicker = false"
                            @confirm="onNurseryConfirm" />
                    </van-popup>

                </div>
                <div class="form-item">
                    <span class="form-label">繁殖方式：</span>
                    <input class="form-input" v-model="formData.breedWay" placeholder="请输入繁殖方式">
                </div>

                <div class="yuan-btn primary-btn submit-btn" @click="saveSenior">保存</div>
            </div>
        </div>

    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import PageTopVue from "@/components/PageTop.vue";
import area from "@/util/area";
import { mapLoad } from "@/util";
import myApi from "@/api/myApi";
import UploadVue from "@/components/Upload.vue";
import toast from "@/util/toast/toast";
let CultivatedPlantsMap: any = null;
@Component({
    name: "tpl",
    components: { PageTopVue, UploadVue },
})
export default class extends Vue {
    pageType = "basic";
    showAreaPicker = false;
    areaList = area;
    formData: any = {};
    pageReady = false;
    selectArea(e: { code: string; name: string }[]) {
        this.formData.baseLocation = e.map((item) => item.name).join("");
        this.formData.baseLocationCopy = e.map((item) => item.name).join("");
        this.showAreaPicker = false;

        const keywords = this.formData.baseLocation;
        AMap.plugin("AMap.PlaceSearch", () => {
            const autoOptions = {
                city: e[1].name,
            };
            var placeSearch = new AMap.PlaceSearch(autoOptions);
            placeSearch.search(keywords, (status: any, result: any) => {
                // 搜索成功时，result即是对应的匹配数据
                const pois = result.poiList?.pois;
                if (pois.length > 0) {
                    const location = pois[0].location;
                    CultivatedPlantsMap.clearMap();
                    CultivatedPlantsMap.setCenter(location);
                    CultivatedPlantsMap.setZoom(12);
                    this.formData.coordinate = [
                        {
                            lng: location.lng,
                            lat: location.lat,
                        },
                    ];
                    new AMap.Marker({
                        map: CultivatedPlantsMap,
                        position: location,
                    });
                }
            });
        });
    }
    pageId = "";
    mounted() {
        mapLoad(() => {
            if (CultivatedPlantsMap) CultivatedPlantsMap = null;
            const toolBar = new AMap.ToolBar({
                visible: false,
                position: "RB",
            });
            CultivatedPlantsMap = new AMap.Map("myMap", {
                zoom: 12,
                center: [116.39, 39.92],
            });
            CultivatedPlantsMap.addControl(toolBar);
            toolBar.show();
            
            const id = this.$route.query.id;
            if (id) {
                this.pageId = id + "";
                this.getDetail();
            }
        });
    }
    async getDetail() {
        const loading = toast.showLoading();
        try {
            const res = await myApi.getRawInboundDetail({ id: this.pageId });
            this.formData = res.data;
            if (res.data.coordinate && res.data.coordinate[0].lng) {
                const location = res.data.coordinate[0];
                CultivatedPlantsMap.setCenter([location.lng, location.lat]);
                new AMap.Marker({
                    map: CultivatedPlantsMap,
                    position: [location.lng, location.lat],
                });
            }
            this.pageReady = true;
        } finally {
            toast.hideLoading(loading);
        }
    }

    showMonthPicker = false;
    monthColumns = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    onMonthConfirm(e: string) {
        this.showMonthPicker = false;
        this.formData.recoveryTime = e;
    }

    showNurseryPicker = false;
    onNurseryConfirm(e: string) {
        this.showNurseryPicker = false;
        this.formData.whetherNeedNursery = e;
    }

    plantChange(files: { url: string }[]) {
        this.formData.plantPicture = files[0]?.url || "";
    }
    recoveryChange(files: { url: string }[]) {
        this.formData.recoveryPicture = files[0]?.url || "";
    }
    processChange(files: { url: string }[]) {
        this.formData.processPicture = files[0]?.url || "";
    }
    tplChange(id: string) {
        this.formData.templateId = id;
    }

    async saveBasic() {
        if (!this.formData.baseLocation) {
            this.$notify({ type: "danger", message: "请输入基地位置" });
            return;
        }
        const loading = toast.showLoading();
        try {
            const res = await myApi.addRawInfo(this.formData);
            this.$notify({ type: "success", message: res.msg });
            this.pageType = "senior";
        } finally {
            toast.hideLoading(loading);
        }
    }
    async saveSenior() {
        const loading = toast.showLoading();
        try {
            const res = await myApi.addRawInfo(this.formData);
            this.$notify({ type: "success", message: res.msg });
        } finally {
            toast.hideLoading(loading);
        }
    }
}
</script>

<style lang="scss">
.cultivated-zoom-container {
    .page-main {
        padding: 0.24rem 0.24rem 0.5rem 0.24rem;
    }
    .page-type {
        .yuan-btn {
            height: 0.6rem;
            display: inline-flex;
            font-size: 0.28rem;
            margin-right: 0.2rem;
        }
    }
    .info-form {
        background: #fff;
        border-radius: 0.08rem;
        padding: 0.2rem 0;
        margin-top: 0.2rem;
    }
    #myMap {
        width: 100%;
        height: 3.1rem;
        margin-bottom: 0.2rem;
    }
    .submit-btn {
        height: 0.6rem;
        width: 2rem;
        margin: 0 auto;
        margin-top: 0.5rem;
    }
}
</style>